<template>
  <el-dialog
    class="detailDialog"
    v-model="props.dialogVisible"
    :title="props.dialogForm?.title + `工单号详情`"
    width="50%"
    :close-on-click-modal="false"
    @close="close"
  >
    <div class="topBox">
      <div style="margin-bottom: 15px">
        <div>设备名称：{{ props.dialogForm?.form.deviceName }}</div>
      </div>
      <div style="margin-bottom: 15px">
        <div>设备型号：{{ props.dialogForm?.form.modelName }}</div>
      </div>
      <div>
        <div>设备编号：{{ props.dialogForm?.form.deviceNum }}</div>
      </div>
    </div>
    <div class="title">基本信息</div>
    <el-row class="row">
      <el-col :span="8">
        <div>
          计划类型：{{
            props.dialogForm?.form.planType == 1 ? '单次点检' : '周期点检'
          }}
        </div>
      </el-col>
      <el-col :span="8">
        <div>点检类型：{{ props.dialogForm?.form.checkTypeName }}</div>
      </el-col>
      <el-col :span="8">
        <div v-if="props.dialogForm?.form.planType == 2">
          点检周期：{{
            props.dialogForm?.form.period + props.dialogForm?.form.periodUnit
          }}
        </div>
      </el-col>
    </el-row>
    <el-row class="row">
      <el-col :span="8">
        <div>点检人：{{ props.dialogForm?.form.checkUserName }}</div>
      </el-col>
      <el-col :span="16">
        <div>
          点检任务时间：{{ props.dialogForm?.form.planBeginDate }}
          {{
            props.dialogForm?.form.planType == 2
              ? '至' + props.dialogForm?.form.planEndDate
              : ''
          }}
        </div>
      </el-col>
    </el-row>
    <el-row class="row">
      <el-col :span="8">
        <div>
          任务状态：{{
            props.dialogForm?.form.checkStatus == 0
              ? '待执行'
              : props.dialogForm?.form.checkStatus == 1
              ? '执行中'
              : props.dialogForm?.form.checkStatus == 2
              ? '点检完成'
              : props.dialogForm?.form.checkStatus == 3
              ? '逾期未点检'
              : props.dialogForm?.form.checkStatus == 9
              ? '已关闭'
              : ''
          }}
        </div>
      </el-col>
      <el-col :span="8" v-if="props.dialogForm?.type == '1'">
        <div>提交点检时间：{{ props.dialogForm?.form.factEndDate }}</div>
      </el-col>
    </el-row>
    <div class="title">点检项目</div>
    <el-row class="row">
      <el-col :span="24">
        <el-table
          :data="props.dialogForm?.form.checkItemRequests"
          border
          style="width: 100%"
        >
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="itemName" label="点检项目" />
          <el-table-column prop="content" label="点检指标" />
          <el-table-column prop="checkResult" label="点检结果" width="100">
            <template #default="scope">
              {{
                scope.row.checkResult == 1
                  ? '正常'
                  : scope.row.checkResult == 2
                  ? '异常'
                  : ''
              }}
            </template>
          </el-table-column>
          <el-table-column prop="dealWay" label="处理方式">
            <template #default="scope">
              {{
                scope.row.dealWay == 1
                  ? '点检处理'
                  : scope.row.dealWay == 2
                  ? '点检报修处理'
                  : ''
              }}
            </template>
          </el-table-column>
          <el-table-column
            prop="repairOrderNum"
            label="维修工单号"
            v-if="props.dialogForm?.type == '1'"
            width="120"
          >
            <template #default="scope">
              {{
                scope.row.repairOrderNum == '' ? '--' : scope.row.repairOrderNum
              }}
            </template>
          </el-table-column>
          <el-table-column
            prop="description"
            label="处理内容"
            v-if="props.dialogForm?.type == '0'"
          />
          <el-table-column prop="dealUserName" label="异常处理人" width="120" />
          <el-table-column
            fixed="right"
            label="操作"
            width="200"
            v-if="props.dialogForm?.type == '1'"
          >
            <template #default="scope">
              <el-button
                style="font-size: var(--el-font-size-base)"
                link
                type="text"
                size="small"
                v-if="scope.row.checkResult == 2"
                @click="unusualDetail(scope.row)"
                >异常详情</el-button
              >
              <el-button
                style="font-size: var(--el-font-size-base)"
                link
                type="text"
                size="small"
                @click="selectOrder(scope.row)"
                v-if="scope.row.repairOrderNum != '' && scope.row.dealWay == 2"
                >查看工单</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <div class="title" v-if="props.dialogForm?.type == '1'">更换备件列表</div>
    <el-row class="row" v-if="props.dialogForm?.type == '1'">
      <el-col :span="24">
        <el-table
          :data="props.dialogForm?.form.partList"
          border
          style="width: 100%"
          :summary-method="getSummaries"
          show-summary
        >
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="partNum" label="备件编号" />
          <el-table-column prop="partName" label="备件名称" />
          <el-table-column prop="partTypeName" label="备件类型">
          </el-table-column>
          <el-table-column prop="totalAmount" label="使用数量">
          </el-table-column>
          <el-table-column prop="totalMoney" label="备件总价值" />
        </el-table>
      </el-col>
    </el-row>
    <el-row class="row" v-if="props.dialogForm?.type == '1'">
      <div class="title">点检照片</div>
      <el-col :span="24">
        <div style="display: flex" v-if="checkPictures[0] != ''">
          <div v-for="(item, index) in checkPictures">
            <el-image
              style="width: 84px; height: 84px; margin-right: 10px"
              :src="item"
              :zoom-rate="1.2"
              v-if="
                item.substring(item.indexOf('?') - 3, item.indexOf('?')) ==
                  'jpg' ||
                item.substring(item.indexOf('?') - 3, item.indexOf('?')) ==
                  'png'
              "
              :preview-src-list="checkPictures"
              :initial-index="index"
              fit="cover"
            />
            <video
              v-else
              :src="item"
              class="avatar"
              controls="controls"
              style="width: 84px; height: 84px; margin-right: 10px"
              @play="handleFullScreen"
            ></video>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="topBox">
      <div style="margin-bottom: 15px">
        <div>备注信息：{{ props.dialogForm?.form.remark || '无' }}</div>
      </div>
    </div>
    <UnusualDialog
      :unusualDialog="unusualDialog"
      :unusualForm="unusualForm"
      @unusualClose="unusualClose"
    >
    </UnusualDialog>
  </el-dialog>
</template>
<script setup lang="ts">
import { TableColumnCtx } from 'element-plus'
import { ref, reactive, defineAsyncComponent, watch } from 'vue'
import router from '/@/router'
const UnusualDialog = defineAsyncComponent(() => import('./UnusualDialog.vue'))
const props = defineProps({
  dialogVisible: Boolean,
  dialogForm: Object
})

const emit = defineEmits(['closeDetail'])
const close = () => {
  emit('closeDetail')
}

const unusualDialog = ref(false)
const unusualForm = ref<any>({})
const unusualDetail = (row: any) => {
  unusualForm.value = row
  unusualDialog.value = !unusualDialog.value
}

const unusualClose = () => {
  unusualDialog.value = !unusualDialog.value
}

const selectOrder = (row: any) => {
  router.push({
    name: 'repairOrderDetail',
    query: {
      id: row.repairOrderNum,
      type: 'task'
    }
  })
}

interface SummaryMethodProps<T = any> {
  columns: TableColumnCtx<T>[]
  data: T[]
}

const getSummaries = (params: SummaryMethodProps) => {
  const { columns, data } = params
  const sums: string[] = []
  if (data) {
    columns.forEach((col: any, idx: any) => {
      if (idx == 0) {
        sums[idx] = '合计'
        return
      } else if (idx == 1 || idx == 2 || idx == 3) {
        return
      }
      const values = data.map((item: any) => Number(item[col.property]))
      if (!values.every((value: any) => Number.isNaN(value))) {
        sums[idx] = `${values.reduce((prev: any, curr: any) => {
          const value = Number(curr)
          if (!Number.isNaN(value)) {
            return prev + curr
          } else {
            return prev
          }
        }, 0)}`
      } else {
        sums[idx] = ''
      }
    })
  }
  return sums
}

const handleFullScreen = (e: any) => {
  launchFullscreen(e.target)
}

const launchFullscreen = (element: any) => {
  //此方法不可以在異步任務中執行，否則火狐無法全屏
  if (element.requestFullscreen) {
    element.requestFullscreen()
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen()
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen()
  } else if (element.oRequestFullscreen) {
    element.oRequestFullscreen()
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullScreen()
  } else {
    var docHtml = document.documentElement
    var docBody = document.body
    var videobox = element
    var cssText = 'width:100%;height:100%;overflow:hidden;'
    docHtml.style.cssText = cssText
    docBody.style.cssText = cssText
    videobox.style.cssText = cssText + ';' + 'margin:0px;padding:0px;'
    document.IsFullScreen = true
  }
}

const checkPictures = ref<any>([])

watch(
  () => props.dialogVisible,
  () => {
    if (props.dialogVisible == true) {
      checkPictures.value = props.dialogForm?.form.checkPictures.split(',')
    }
  }
)
</script>
<style scoped lang="scss">
.detailDialog {
  .topBox {
    font-size: var(--el-font-size-base);
    margin-bottom: 15px;
  }

  .row {
    font-size: var(--el-font-size-base);
    margin-bottom: 8px;
  }

  .title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
  }
}
</style>
